<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useCommunityNameList } from '@/hooks/index.js'
import { getExpensesListAPI, delProjectAPI } from '@/api/expenses'
import Table from '@/components/Form/table'
import Pagination from '@/components/Form/Pagination'
import addForm from '@/views/expenses/project/addForm'
import { ElMessage } from 'element-plus'


const communityList = useCommunityNameList()
const addRef = ref()

const queryData = reactive({
  current: 1,
  pageSize: 6,
  community_code: '',
  create_time: '',
  community: {
    name: ''
  },
  name: '',
})

// 渲染列表
const list = ref([])
const total = ref(0)
const initData = async () => {
  const { data: { count, rows } } = await getExpensesListAPI(queryData)
  console.log({ data: { count, rows } })
  list.value = rows
  total.value = count
}
onMounted(() => {
  initData()
})
const projectTable = [
  { value: 'id', label: 'ID' },
  { value: 'community.name', label: '小区名称' },
  { value: 'code', label: '收费项目编号' },
  { value: 'name', label: '项目名称' },
  { value: 'create_time', label: '创建时间' }
]

// 修改事件
const edit = (id) => {
  console.log(id);

  addRef.value.replyData(id)
}

// 删除事件
const del = async (id) => {
  // 发送请求
  await delProjectAPI(id)
  // 提示成功
  ElMessage.success('删除成功')
  // 边缘问题
  if (queryData.pageNum > 1 && list.value.length === 1) queryData.pageNum--
  initData()
}

// 查询
const onSearch = () => {
  // queryData.pageNum=1
  queryData.create_time = queryData.create_time !== '' ? queryData.create_time.map(item => +item).join(',') : queryData.create_time
  initData()
}

// 重置
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 6,
    community_code: '',
    create_time: '',
    community: {
      name: ''
    },
    name: '',
  })
  initData()
}

</script>

<template>
  <div>
    <el-card>
    <b>收费项目管理</b> <b style="font-weight: 400;font-size:12px;">用于展示收费项目列表信息，以及增加、修改、删除等操作</b>
    <el-card>
      <!-- 搜索区域 -->
      <el-form label-width="70px" :inline="true" size="normal">
        <el-row :gutter="20">
          <el-col :span="5" :offset="0">
            <el-form-item label="小区名称">
              <el-select placeholder="请输入" v-model="queryData.community_code">
                <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-form-item label="项目名称">
              <el-input placeholder="请输入" v-model="queryData.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="创建时间">
              <el-date-picker v-model="queryData.create_time" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" style="width:250px">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6" :offset="0">
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br>
    <el-card>
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.isShow = true">新增项目</el-button>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <Table :table="projectTable" :tableData="list" @edit="edit" @del="del">
        <template #id="{ row }">{{ row.id }}</template>
        <template #community.name="{ row }">{{ row.community?.name }}</template>
        <template #create_time="{ row }">{{ new Date(row.create_time).toLocaleString() }}</template>
      </Table>

      <!-- 分页区域 -->
      <Pagination v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize" :total="total"
        @initData="initData" />

      <!-- 新增修改组件 -->
      <addForm ref="addRef" @updateList="initData" />
    </el-card>
  </el-card>
  </div>
</template>


<style scoped></style>